<template>
    <sc-dialog title="选择班级" v-model="propValue" destroy-on-close custom-class="rightsProfile" width="30vw" @close="_close" @open="_open">
        <div class="dialog-content pl20 pt20 pr20">
            <div style="margin-bottom: 5px"><el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input></div>
            <el-tree
                ref="tree"
                class="treebox"
                check-on-click-node
                default-expand-all
                show-checkbox
                node-key="id"
                :data="menbers"
                :props="defaultProps"
                :default-checked-keys="existedMenbers"
                :filter-node-method="filterNode"
                @check-change="handleCheckChange"
            ></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button icon="el-icon-setting" size="small" type="primary" @click="onSubmit">确 定</el-button>
            <el-button size="small" @click="_close">取 消</el-button>
        </span>
    </sc-dialog>
</template>
<script>
export default {
    name: 'rightsProfile',
    components: {},
    props: {
        schoolId: {
            type: Number
        },
        value: {
            type: Boolean,
            default: false,
        },
        // menbers: {
        //     type: Array,
        //     default() {
        //         return []
        //     },
        // },
        existedMenbers: {
            type: Array,
            default() {
                return []
            },
        },
        currentData: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    data() {
        return {
            filterText: '',
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            menbers:[]
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        },
    },
    computed: {
        propValue: {
            get() {
                return this.value
            },
            set(nval) {
                this.$emit('input', nval)
            },
        },
    },
    methods: {
        // 获取学校树
        async getClassTreeList(schoolId) {
            this.loading = true
            const { code, data }  = await this.$api.schoolConfig.schoolList.getClassTreeList({ schoolId:this.schoolId })
            if (code === 200) {
                this.menbers = data || []
                this.$refs.tree.setCheckedKeys([])
            }
            this.loading = false
        },
        async onSubmit() {
            // console.log('选中的包含父级nodes', this.$refs.tree.getCheckedNodes())
            // console.log('选中的包含父级keys', this.$refs.tree.getCheckedKeys())
            // console.log('选中的不包含父级keys', this.$refs.tree.getCheckedKeys(true))
            // console.log('全部选中包含半选', this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()))
            this.$emit('input', false)
            this.$emit('filterClass', this.$refs.tree.getCheckedNodes(true)[0])
        },

        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },

        //节点选中状态发生变化时的回调，当选中另一个后，当前的的节点状态变化也会触发这个事件
        handleCheckChange(item,checked,self) {
            if (checked) {
                this.$refs.tree.setCheckedKeys([item.id]);
                this.$refs.tree.setCurrentKey(item.id)
            } else {
                if (this.editCheckd === item.id) {
                    this.$refs.tree.setCheckedKeys([item.id]);
                }

            }
        },
        _open(){
            this.getClassTreeList()
        },
        //关闭弹窗
        _close() {
            this.$emit('input', false)
        },
    },
}
</script>
<style lang="scss" scoped>
.dialog-content {
    .treebox {
        max-height: 400px;
        overflow-y: scroll;
    }
    .get-face {
        height: 200px;
        width: 200px;
        background-color: rgba(249, 249, 249, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(233, 233, 233, 1);
        border-right: 8px;
        color: $t-color-2;
        cursor: pointer;
        .saasIcon {
            margin-top: 20px;
            color: $t-color-2;
            font-size: 80px;
        }
        span {
            font-size: 20px;
            font-width: bold;
            margin-top: 30px;
        }
    }
    .face-img {
        position: relative;
        width: 200px;
        img {
            width: 200px;
        }
        .saasIcon {
            cursor: pointer;
            position: absolute;
            right: -13px;
            top: -18px;
            font-size: 40px;
            font-weight: bold;
            color: #dc5858;
        }
    }
}
</style>
